<script setup>
import { ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axios from 'axios'
import { userId } from '../../stores/user'
import { useGetFriendStore, friendList } from '@/stores/getFriend'

const getFriendStore = useGetFriendStore()

const input = ref('')

    watch(() => input.value, () => {
        if(input.value !== ''){
            search()
            console.log(userId.value)
        }
        else{
            getFriendStore.getFriendList()
        }
    }
    )

function search() {
    axios({
            method : 'get',
            url : "https://47.120.69.214:8787/chat/getGroupAndFriendListByName",
            params : {
                "userId" : userId.value,
                "name" : input.value
            }
        }).then(response => {
            friendList.value = response.data
        })
        .catch((error) => {
            console.log(error)
    })
}

</script>

<template>
    <div id="chatInterface_searchFrame" >
        <el-input v-model="input" style="margin : 5% 0; width:18vw" placeholder="输入姓名搜索" :prefix-icon="Search"/>

    </div>
</template>
 